<template>
	<div class="icons">
		<!--swiper包裹-->
		<swiper :options="swiperOption" ref="mySwiper">
			<swiper-slide v-for="(items,index) in page" :key="index">
				<div class="icon" v-for="(item,index) in items" :key="item.id">
					<img :src="item.url" alt="" />
					<p>{{item.txt}}</p>
				</div>
			</swiper-slide>
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>
</template>

<script>
	import 'swiper/dist/css/swiper.css'//引用样式
	import {swiper,swiperSlide} from 'vue-awesome-swiper'//使用组件
	export default{
		name:"Icons",
		props:{//接收参数
			icons:Array
		},
		components:{//注册组件
			swiper,
			swiperSlide
		},
		data(){
			return {
				swiperOption:{
					//和官网swiper配置一模一样
					pagination:".swiper-pagination",
				},
//				"iconsUrl":[
//					{"id":"001","txt":"景点门票","url":"https://imgs.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png"},
//					{"id":"002","txt":"故宫","url":"https://imgs.qunarzz.com/piao/fusion/1803/6c/9e54a8540fee0102.png"},
//					{"id":"004","txt":"南宫养生温泉","url":"https://imgs.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png"},
//					{"id":"005","txt":"一日游","url":"https://imgs.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png"},
//					{"id":"006","txt":"古北水镇","url":"https://imgs.qunarzz.com/piao/fusion/1803/67/9a1678221b8e0e02.png"},
//					{"id":"003","txt":"北京必游","url":"https://imgs.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png"},
//					{"id":"007","txt":"北京滑雪","url":"https://imgs.qunarzz.com/piao/fusion/1803/fc/b10a6b2e4f0fe102.png"},
//					{"id":"008","txt":"北京欢乐谷","url":"https://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/338c5b924c5809e8c7b14f60a953c3e2.png"},
//					{"id":"007","txt":"北京滑雪","url":"https://imgs.qunarzz.com/piao/fusion/1803/fc/b10a6b2e4f0fe102.png"},
//				]
			}
		},
		computed:{//计算属性
			page(){
				const pages=[];
				this.icons.forEach((item,index)=>{//对数据进行循环
					const page=Math.floor(index/8)//0 0 0 0  0 0 0 0  如果index=8 有9条数据
					if(!pages[page]){
						pages[page]=[]
					}
					pages[page].push(item);
				})
				console.log(pages)
				return pages
			}
		}
	}
</script>

<style lang="stylus" scoped>
	/*样式穿透*/
	.icons>>>.swiper-pagination-bullets{
		bottom:3px;
	}
	.icons>>>.swiper-pagination-bullet-active{
		background:#00bcd4;
	}
	.icons{
		/*overflow:hidden;
		width:100%;
		height:0;
		padding-bottom:50%;*/
		/*background:#eaeaea;*/
		border-bottom:1px solid #eaeaea;
		padding-bottom:2px;/*下方增加padding,给分页足够空间*/
	} 
	.icon{
		width:25%;
		height:0;
		padding-bottom:25%;
		float:left;
		text-align:center;
	}
	.icon img{width:60%;margin-top:0.07rem;}
</style>